<template>
  <div class="singer" v-loading="loading">
    <van-index-bar
      :index-list="indexList"
      highlight-color="#ffcd32"
      :sticky-offset-top="88"
    >
      <div v-for="item in singerList" :key="item.title">
        <van-index-anchor :index="item.title">{{
          item.title
        }}</van-index-anchor>
        <div
          class="cell"
          v-for="v in item.list"
          :key="v.id"
          @click="clickSinger(v)"
        >
          <!-- <lazy-component> -->
          <van-image :src="v.pic" fit="fill" />
          <!-- </lazy-component> -->
          {{ v.name }}
        </div>
      </div>
    </van-index-bar>
  </div>
</template>
<script>
import { getSingerList } from '@/service/singer'
import { setStorage } from '@/utils/storage'
import { SINGER_KEY } from '@/assets/js/constant'

import { ref, nextTick } from 'vue'
import { useRouter } from 'vue-router'
export default {
  name: 'singlist',
  setup() {
    const singerList = ref([])
    const indexList = ref([])
    const SelectedSinger = ref(null)
    const router = useRouter()
    const loading = ref(false)

    const getList = async () => {
      if (loading.value) return
      loading.value = true
      const res = await getSingerList()
      singerList.value = res.singers
      indexList.value = res.singers.map(v => v.title)
      await nextTick()
      loading.value = false
    }
    getList()

    const clickSinger = item => {
      SelectedSinger.value = item
      setStorage(SINGER_KEY, item)
      router.push({
        name: 'singerDetail',
        params: item
      })
    }

    return {
      clickSinger,
      loading,
      singerList,
      indexList,
      SelectedSinger
    }
  }
}
</script>
<style lang="scss">
.singer {
  .van-index-bar {
    .van-index-bar__sidebar {
      background-color: $color-background;
      padding: 5px 0;
    }
    .cell {
      background-color: $color-background;
      color: #fff;
      padding: 10px 30px;
      height: 70px;
      display: flex;
      align-items: center;
      font-size: 14px;
      .van-image {
        width: 50px;
        height: 50px;
        overflow: hidden;
        border-radius: 50%;
        margin-right: 20px;
      }
    }
    .van-index-anchor {
      font-size: 16px;
    }
  }
}
</style>
